<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>经理合同管理系统</title>
    <meta charset="UTF-8">
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2c3e50;
            --accent-color: #e74c3c;
            --success-color: #2ecc71;
            --light-bg: #f8f9fa;
            --dark-text: #333;
            --light-text: #fff;
            --border-color: #ddd;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #f0f2f5;
            color: var(--dark-text);
            line-height: 1.6;
            padding-top: 70px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
            color: var(--light-text);
            padding: 15px 0;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
            box-shadow: var(--shadow);
        }


        .logo h1 {
            font-size: 1.5rem;
            font-weight: 600;
        }


        .card {
            background: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 20px;
            margin-bottom: 20px;
            transition: transform 0.3s ease;
        }

        .card:hover {
            transform: translateY(-3px);
        }

        .card-header {
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 12px;
            margin-bottom: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .card-title {
            font-size: 1.3rem;
            color: var(--secondary-color);
            font-weight: 600;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 6px;
            font-weight: 600;
            color: var(--secondary-color);
            font-size: 0.9rem;
        }

        input, select, textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--border-color);
            border-radius: 5px;
            font-size: 0.95rem;
            transition: border-color 0.3s;
        }

        input:focus, select:focus, textarea:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
        }

        .form-row {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin-bottom: 10px;
        }

        .action-buttons {
            display: flex;
            gap: 12px;
            margin-top: 20px;
        }

        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 0.95rem;
            font-weight: 600;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .btn-primary {
            background: var(--primary-color);
            color: white;
        }

        .btn-secondary {
            background: var(--secondary-color);
            color: white;
        }

        .btn-success {
            background: var(--success-color);
            color: white;
        }

        .btn-danger {
            background: var(--accent-color);
            color: white;
        }

        .btn:hover {
            opacity: 0.9;
            transform: translateY(-2px);
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
            background: white;
            border-radius: 6px;
            overflow: hidden;
            box-shadow: var(--shadow);
        }

        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
            font-size: 0.9rem;
        }

        th {
            background-color: var(--primary-color);
            color: white;
            font-weight: 600;
        }

        tr:last-child td {
            border-bottom: none;
        }

        tr:hover {
            background-color: #f5f7fa;
        }

        .apartment-tag {
            display: inline-block;
            background-color: #e3f2fd;
            color: var(--primary-color);
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 500;
        }

        .tenant-tag {
            display: inline-block;
            background-color: #e8f5e9;
            color: var(--success-color);
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 500;
        }

        .tab-container {
            margin-bottom: 25px;
        }

        .tabs {
            display: flex;
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 15px;
        }

        .tab {
            padding: 10px 20px;
            cursor: pointer;
            background: white;
            border: 1px solid var(--border-color);
            border-bottom: none;
            border-radius: 5px 5px 0 0;
            margin-right: 5px;
            transition: all 0.3s;
            font-weight: 500;
        }

        .tab.active {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        .section-title {
            display: flex;
            justify-content: space-between;
            font-size: 1.4rem;
            color: var(--secondary-color);
            margin-bottom: 20px;
            padding-bottom: 8px;
            border-bottom: 2px solid var(--primary-color);
            font-weight: 600;
        }

        .contract-actions {
            display: flex;
            gap: 5px;
        }

        .action-btn {
            padding: 5px 10px;
            border-radius: 4px;
            background: #f0f0f0;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
        }

        .action-btn.edit {
            background: #e3f2fd;
            color: var(--primary-color);
        }

        .action-btn.add {
            background: #e8f5e9;
            color: var(--success-color);
        }

        .action-btn.delete {
            background: #ffebee;
            color: var(--accent-color);
        }

        .action-btn:hover {
            opacity: 0.8;
        }

        .contract-form-container {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }

        .contract-form {
            background: white;
            border-radius: 8px;
            width: 90%;
            max-width: 600px;
            padding: 25px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .form-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .form-header h2 {
            font-size: 1.3rem;
            color: var(--secondary-color);
        }

        .close-btn {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--dark-text);
        }

        .return {
            font-size: 1.5rem;
            color: var(--dark-text);
            cursor: pointer;
            margin-right: 10px;
            text-decoration: none;
        }
    </style>
</head>
<body>
<jsp:include page="/page/model/navbar.jsp" />

<div class="container">
    <div class="section-title">
        <p>合同管理</p>
        <a href="${pageContext.request.contextPath}/employee/personalInfo" class="return">返回首页</a>
    </div>

    <!-- 标签页 -->
    <div class="tab-container">
        <div class="tabs">
            <div class="tab active" onclick="switchTab('apartments')">公寓管理</div>
            <div class="tab" onclick="switchTab('contracts')">租赁合同</div>
            <div class="tab" onclick="switchTab('new-contract')">新建合同</div>
        </div>

        <!-- 公寓管理标签页 -->
        <div id="apartments" class="tab-content active">
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">公寓列表</h2>
                </div>

                <table>
                    <thead>
                    <tr>
                        <th>楼栋编号</th>
                        <th>房间号</th>
                        <th>卧室数</th>
                        <th>卫生间数</th>
                        <th>地址</th>
                    </tr>
                    </thead>
                    <tbody>
                    <c:if test="${houses.size() == 0}">
                        <tr>
                            <td colspan="5">暂无数据</td>
                        </tr>
                    </c:if>
                    <c:forEach items="${houses}" var="house">
                        <tr>
                            <td>${house.buildingId}</td>
                            <td>${house.apartmentNo}</td>
                            <td>${house.bedroomCount}</td>
                            <td>${house.bathroomCount}</td>
                            <td>${house.address}</td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 合同管理标签页 -->
        <div id="contracts" class="tab-content">
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">租赁合同列表</h2>
                </div>

                <table>
                    <thead>
                    <tr>
                        <th>合同编号</th>
                        <th>签订日期</th>
                        <th>开始日期</th>
                        <th>租期(月)</th>
                        <th>押金</th>
                        <th>月租金</th>
                        <th>公寓</th>
                        <th>租户</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <c:if test="${contractDetails.size() == 0}">
                        <tr>
                            <td colspan="9">暂无数据</td>
                        </tr>
                    </c:if>
                    <c:forEach items="${contractDetails}" var="contractDetail">
                        <tr>
                            <td>${contractDetail.leaseContract.contractId}</td>
                            <td>${contractDetail.leaseContract.signDate}</td>
                            <td>${contractDetail.leaseContract.startDate}</td>
                            <td>${contractDetail.leaseContract.leaseTerm}</td>
                            <td>${contractDetail.leaseContract.deposit}</td>
                            <td>${contractDetail.leaseContract.rent}</td>
                            <td><span class="apartment-tag">${contractDetail.apartment.buildingId}&nbsp;${contractDetail.apartment.apartmentNo}</span></td>
                            <td>
                                <c:forEach items="${contractDetail.tenants}" var="tenant">
                                    <span class="tenant-tag">${tenant.name}</span>
                                </c:forEach>
                            </td>
                            <td class="contract-actions">
                                <button class="action-btn edit" onclick="editContract(
                                        '${contractDetail.leaseContract.contractId}',
                                        '${contractDetail.leaseContract.signDate}',
                                        '${contractDetail.leaseContract.startDate}',
                                        '${contractDetail.leaseContract.leaseTerm}',
                                        '${contractDetail.leaseContract.deposit}',
                                        '${contractDetail.leaseContract.rent}',
                                        '${employeeDetails.employee.employeeId}'
                                        )">编辑</button>
                                <button class="action-btn add" onclick="addTenantToContract('${contractDetail.leaseContract.contractId}')">添加租户</button>
                                <button class="action-btn delete" onclick="deleteContract('${contractDetail.leaseContract.contractId}')">删除</button>
                            </td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 新建合同标签页 -->
        <div id="new-contract" class="tab-content">
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">新建租赁合同</h2>
                </div>
                <form action="${pageContext.request.contextPath}/contract/add" method="post">
                    <div class="form-row">
                        <div class="form-group">
                            <label for="signDate">签订日期</label>
                            <input type="date" id="signDate" name="signDate" required>
                        </div>
                        <div class="form-group">
                            <label for="startDate">开始日期</label>
                            <input type="date" id="startDate" name="startDate" required>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="leaseTerm">租期（月）</label>
                            <input type="number" id="leaseTerm" name="leaseTerm" min="1" max="60" value="12" required>
                        </div>
                        <div class="form-group">
                            <label for="deposit">押金（元）</label>
                            <input type="number" id="deposit" name="deposit" min="0" step="0.01" value="3000" required>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="rent">月租金（元）</label>
                            <input type="number" id="rent" name="rent" min="0" step="0.01" value="4500" required>
                        </div>
                        <div class="form-group">
                            <label for="managerId">经办经理ID</label>
                            <input type="text" id="managerId" name="managerId" value="${employeeDetails.employee.employeeId}" readonly>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            <label for="buildingId">楼栋编号</label>
                            <input type="text" id="buildingId" name="buildingId" value="43#">
                        </div>
                        <div class="form-group">
                            <label for="apartmentNo">公寓编号</label>
                            <input type="text" id="apartmentNo" name="apartmentNo" value="A101">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="tenantId">添加租客</label>
                            <div class="form-group">
                                <input type="text" id="tenantId" name="tenantId" placeholder="租客ID" required>
                            </div>
                        </div>
                    </div>

                    <div class="action-buttons">
                        <button type="submit" class="btn btn-primary">创建合同</button>
                        <button type="reset" class="btn btn-secondary">重置表单</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<!-- 添加租客到合同的模态框 -->
<div id="addTenantModal" class="contract-form-container">
    <div class="contract-form">
        <form action="${pageContext.request.contextPath}/contract/addTenant" method="post">
        <div class="form-header">
            <h2>添加租客到合同</h2>
            <button class="close-btn" onclick="closeModal()">&times;</button>
        </div>

        <div class="form-group">
            <label for="contractId">合同编号</label>
            <input type="text" id="contractId" name="contractId" readonly>
        </div>

        <div class="form-group">
            <label for="newTenantId">租客ID</label>
            <input type="text" id="newTenantId" name="tenantId" placeholder="输入租客ID" required>
        </div>

        <div class="action-buttons">
            <button class="btn btn-success" type="submit">添加租客</button>
            <button class="btn btn-danger" onclick="closeModal()">取消</button>
        </div>
    </form>
    </div>

</div>

<!-- 编辑合同的模态框 -->
<div id="editContract" class="contract-form-container">
    <div class="contract-form">
        <form action="${pageContext.request.contextPath}/contract/edit" method="post">
            <div class="form-header">
                <h2>编辑租客信息</h2>
                <button class="close-btn" type="button" onclick="closeEditModal()">&times;</button>
            </div>

            <div class="form-group">
                <label for="editContractId">合同编号</label>
                <input type="text" id="editContractId" name="contractId" readonly>
            </div>

            <div class="form-group">
                <input type="text" id="editSignDate" name="signDate"  required readonly hidden="hidden">
            </div>

            <div class="form-group">
                <input type="text" id="editStartDate" name="startDate"  required readonly hidden="hidden">
            </div>

            <div class="form-group">
                <label for="editLeaseTerm">租期</label>
                <input type="text" id="editLeaseTerm" name="leaseTerm">
            </div>

            <div class="form-group">
                <label for="editDeposit">押金</label>
                <input type="text" id="editDeposit" name="deposit">
            </div>

            <div class="form-group">
                <label for="editRent">月租金</label>
                <input type="text" id="editRent" name="rent">
            </div>

            <div class="form-group">
                <label for="editManagerId">管理员ID</label>
                <input type="text" id="editManagerId" name="managerId" readonly>
            </div>

            <div class="action-buttons">
                <button class="btn btn-success" type="submit">保存修改</button>
                <button class="btn btn-danger" type="button" onclick="closeEditModal()">取消</button>
            </div>
        </form>
    </div>
</div>

<script>
    // 初始化页面
    document.addEventListener('DOMContentLoaded', function() {
        // 设置默认日期
        document.getElementById('signDate').value = new Date().toISOString().split('T')[0];

        // 设置开始日期为明天
        const tomorrow = new Date();
        tomorrow.setDate(tomorrow.getDate() + 1);
        document.getElementById('startDate').value = tomorrow.toISOString().split('T')[0];
    });

    // 切换标签页
    function switchTab(tabId) {
        // 隐藏所有标签内容
        document.querySelectorAll('.tab-content').forEach(tab => {
            tab.classList.remove('active');
        });

        // 移除所有标签的active类
        document.querySelectorAll('.tab').forEach(tab => {
            tab.classList.remove('active');
        });

        // 显示选中的标签内容
        document.getElementById(tabId).classList.add('active');

        // 激活选中的标签
        const tabElements = document.querySelectorAll('.tab');
        tabElements.forEach(tab => {
            if (tab.textContent.includes(tabId === 'apartments' ? '公寓管理' :
                tabId === 'contracts' ? '租赁合同' : '新建合同')) {
                tab.classList.add('active');
            }
        });
    }

    // 添加租户到合同
    function addTenantToContract(contractId) {
        document.getElementById('contractId').value = contractId;
        document.getElementById('addTenantModal').style.display = 'flex';
    }

    // 关闭模态框
    function closeModal() {
        document.getElementById('addTenantModal').style.display = 'none';
        // 清空表单
        document.getElementById('newTenantName').value = '';
        document.getElementById('newTenantId').value = '';
    }

    // 删除租客
    function deleteContract(contractId) {
        if (confirm('确定要删除此合同吗？')) {
            // 发送删除请求
            window.location.href = '${pageContext.request.contextPath}/contract/delete?contractId=' + contractId;
        }
    }

    // 编辑合同
    function editContract(contractId, signDate, startDate, leaseTerm, deposit, rent, managerId) {
        document.getElementById('editContractId').value = contractId;
        document.getElementById('editSignDate').value = signDate;
        document.getElementById('editStartDate').value = startDate;
        document.getElementById('editLeaseTerm').value = leaseTerm;
        document.getElementById('editDeposit').value = deposit;
        document.getElementById('editRent').value = rent;
        document.getElementById('editManagerId').value = managerId;
        document.getElementById('editContract').style.display = 'flex';
    }

    // 关闭编辑合同模态框
    function closeEditModal() {
        document.getElementById('editContract').style.display = 'none';
    }
</script>
</body>
</html>